ஜாவாஸ்கிரிப்ட் ரியாக்டிவ் ப்ரோகிராமிங்: RxJS பேட்டர்ன்கள் & அப்சர்வெபில் ஸ்ட்ரீம்கள்

நவீன வலை மேம்பாட்டின் எப்போதும் மாறிவரும் உலகில், பதிலளிக்கக்கூடிய, அளவிடக்கூடிய, மற்றும் பராமரிக்க எளிதான பயன்பாடுகளை உருவாக்குவது மிகவும் முக்கியம். ரியாக்டிவ் ப்ரோகிராமிங் (RP) என்பது ஒத்திசைவற்ற தரவு ஸ்ட்ரீம்களைக் கையாள்வதற்கும், உங்கள் பயன்பாடு முழுவதும் மாற்றங்களைப் பரப்புவதற்கும் ஒரு சக்திவாய்ந்த மாதிரியை வழங்குகிறது. ஜாவாஸ்கிரிப்டில் RP-ஐ செயல்படுத்தும் பிரபலமான நூலகங்களில், RxJS (Reactive Extensions for JavaScript) ஒரு வலிமையான மற்றும் பல்துறை கருவியாக விளங்குகிறது.

ரியாக்டிவ் ப்ரோகிராமிங் என்றால் என்ன?

அதன் மையத்தில், ரியாக்டிவ் ப்ரோகிராமிங் என்பது ஒத்திசைவற்ற தரவு ஸ்ட்ரீம்கள் மற்றும் மாற்றங்களின் பரவலைக் கையாள்வதைப் பற்றியது. ஒரு விரிதாளை (spreadsheet) கற்பனை செய்து பாருங்கள், அதில் ஒரு கலத்தை (cell) புதுப்பித்தால், தொடர்புடைய சூத்திரங்கள் தானாகவே மீண்டும் கணக்கிடப்படும். அதுதான் RP-இன் சாராம்சம் – தரவு மாற்றங்களுக்கு ஒரு அறிவிப்பு மற்றும் திறமையான முறையில் எதிர்வினையாற்றுவது.

பாரம்பரிய இம்பரேடிவ் ப்ரோகிராமிங்கில் பெரும்பாலும் நிலையை (state) நிர்வகிப்பதும், நிகழ்வுகளுக்குப் பதிலளிக்கும் விதமாக கூறுகளை (components) கைமுறையாகப் புதுப்பிப்பதும் அடங்கும். இது சிக்கலான மற்றும் பிழை ஏற்பட வாய்ப்புள்ள குறியீட்டிற்கு வழிவகுக்கும், குறிப்பாக நெட்வொர்க் கோரிக்கைகள் அல்லது பயனர் தொடர்புகள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளும் போது. RP எல்லாவற்றையும் ஒரு தரவு ஸ்ட்ரீமாகக் கருதி, இந்த ஸ்ட்ரீம்களை மாற்ற, வடிகட்ட மற்றும் இணைக்க ஆபரேட்டர்களை வழங்குவதன் மூலம் இதை எளிதாக்குகிறது.

RxJS அறிமுகம்: ஜாவாஸ்கிரிப்ட்டிற்கான ரியாக்டிவ் எக்ஸ்டென்ஷன்கள்

RxJS என்பது அப்சர்வெபில் சீக்வென்ஸ்களைப் பயன்படுத்தி ஒத்திசைவற்ற மற்றும் நிகழ்வு அடிப்படையிலான நிரல்களை உருவாக்குவதற்கான ஒரு நூலகமாகும். இது தரவு ஸ்ட்ரீம்களை எளிதாகக் கையாள உங்களை அனுமதிக்கும் சக்திவாய்ந்த ஆபரேட்டர்களின் தொகுப்பை வழங்குகிறது. RxJS நிகழ்வுகள் அல்லது தரவுகளின் வரிசைகளை திறமையாக நிர்வகிக்க அப்சர்வர் பேட்டர்ன், இட்டரேட்டர் பேட்டர்ன் மற்றும் ஃபங்ஷனல் ப்ரோகிராமிங் கருத்துக்களை அடிப்படையாகக் கொண்டது.

RxJS-இல் முக்கிய கருத்துக்கள்:

• அப்சர்வெபில்கள் (Observables): ஒன்று அல்லது அதற்கு மேற்பட்ட அப்சர்வர்களால் கவனிக்கக்கூடிய தரவு ஸ்ட்ரீமைக் குறிக்கிறது. அவை சோம்பேறித்தனமானவை மற்றும் சப்ஸ்கிரைப் செய்யப்படும்போது மட்டுமே மதிப்புகளை வெளியிடத் தொடங்கும்.
• அப்சர்வர்கள் (Observers): அப்சர்வெபில்களால் வெளியிடப்படும் தரவைப் பயன்படுத்துகின்றன. அவற்றுக்கு மூன்று முறைகள் உள்ளன: மதிப்புகளைப் பெற next(), பிழைகளைக் கையாள error(), மற்றும் ஸ்ட்ரீமின் முடிவைக் குறிக்க complete().
• ஆபரேட்டர்கள் (Operators): அப்சர்வெபில்களை மாற்றும், வடிகட்டும், இணைக்கும் அல்லது கையாளும் செயல்பாடுகள். RxJS பல்வேறு நோக்கங்களுக்காக பரந்த அளவிலான ஆபரேட்டர்களை வழங்குகிறது.
• சப்ஜெக்ட்கள் (Subjects): அப்சர்வெபில்கள் மற்றும் அப்சர்வர்கள் என இரண்டாகவும் செயல்படுகின்றன, இது பல சப்ஸ்கிரைபர்களுக்கு தரவை மல்டிகாஸ்ட் செய்யவும், ஸ்ட்ரீமில் தரவைச் சேர்க்கவும் உங்களை அனுமதிக்கிறது.
• ஷெட்யூலர்கள் (Schedulers): அப்சர்வெபில்களின் ஒத்திசைவைக் கட்டுப்படுத்துகின்றன, இது குறியீட்டை ஒத்திசைவாகவோ அல்லது ஒத்திசைவற்றதாகவோ, வெவ்வேறு திரெட்களிலோ அல்லது குறிப்பிட்ட தாமதங்களுடனோ இயக்க உங்களை அனுமதிக்கிறது.

அப்சர்வெபில் ஸ்ட்ரீம்கள் விரிவாக

அப்சர்வெபில்கள் RxJS-இன் அடித்தளமாகும். அவை காலப்போக்கில் கவனிக்கக்கூடிய ஒரு தரவு ஸ்ட்ரீமைக் குறிக்கின்றன. ஒரு அப்சர்வெபில் அதன் சப்ஸ்கிரைபர்களுக்கு மதிப்புகளை வெளியிடுகிறது, அவர்கள் அந்த மதிப்புகளைச் செயல்படுத்தலாம் அல்லது அதற்கு எதிர்வினையாற்றலாம். இதை ஒரு மூலத்திலிருந்து ஒன்று அல்லது அதற்கு மேற்பட்ட நுகர்வோருக்கு தரவு பாயும் ஒரு பைப்லைன் போல நினைத்துப் பாருங்கள்.

அப்சர்வெபில்களை உருவாக்குதல்:

RxJS அப்சர்வெபில்களை உருவாக்க பல வழிகளை வழங்குகிறது:

• Observable.create(): அப்சர்வெபிலின் நடத்தை மீது முழுமையான கட்டுப்பாட்டை வழங்கும் ஒரு கீழ்-நிலை முறை.
• from(): ஒரு அரே, ப்ராமிஸ், இட்டரெபில் அல்லது அப்சர்வெபில் போன்ற பொருளை ஒரு அப்சர்வெபில் ஆக மாற்றுகிறது.
• of(): மதிப்புகளின் வரிசையை வெளியிடும் ஒரு அப்சர்வெபில்-ஐ உருவாக்குகிறது.
• interval(): ஒரு குறிப்பிட்ட இடைவெளியில் எண்களின் வரிசையை வெளியிடும் ஒரு அப்சர்வெபில்-ஐ உருவாக்குகிறது.
• timer(): ஒரு குறிப்பிட்ட தாமதத்திற்குப் பிறகு ஒற்றை மதிப்பை வெளியிடும், அல்லது தாமதத்திற்குப் பிறகு ஒரு நிலையான இடைவெளியில் எண்களின் வரிசையை வெளியிடும் ஒரு அப்சர்வெபில்-ஐ உருவாக்குகிறது.
• fromEvent(): ஒரு DOM உறுப்பு அல்லது பிற நிகழ்வு மூலத்திலிருந்து நிகழ்வுகளை வெளியிடும் ஒரு அப்சர்வெபில்-ஐ உருவாக்குகிறது.

உதாரணம்: ஒரு அரேவிலிருந்து அப்சர்வெபில் உருவாக்குதல்

```javascript import { from } from 'rxjs'; const myArray = [1, 2, 3, 4, 5]; const myObservable = from(myArray); myObservable.subscribe( value => console.log('பெறப்பட்டது:', value), error => console.error('பிழை:', error), () => console.log('முடிந்தது') ); // வெளியீடு: // பெறப்பட்டது: 1 // பெறப்பட்டது: 2 // பெறப்பட்டது: 3 // பெறப்பட்டது: 4 // பெறப்பட்டது: 5 // முடிந்தது ```

உதாரணம்: ஒரு நிகழ்விலிருந்து அப்சர்வெபில் உருவாக்குதல்

```javascript import { fromEvent } from 'rxjs'; const button = document.getElementById('myButton'); const clickObservable = fromEvent(button, 'click'); clickObservable.subscribe( event => console.log('பொத்தான் கிளிக் செய்யப்பட்டது!', event) ); ```

அப்சர்வெபில்களுக்கு சப்ஸ்கிரைப் செய்தல்:

ஒரு அப்சர்வெபில்-லிருந்து மதிப்புகளைப் பெறத் தொடங்க, நீங்கள் subscribe() முறையைப் பயன்படுத்தி அதற்கு சப்ஸ்கிரைப் செய்ய வேண்டும். subscribe() முறை மூன்று வாதங்கள் வரை ஏற்கிறது:

• next: அப்சர்வெபில்-ஆல் வெளியிடப்படும் ஒவ்வொரு மதிப்பிற்கும் அழைக்கப்படும் ஒரு செயல்பாடு.
• error: அப்சர்வெபில் ஒரு பிழையை வெளியிட்டால் அழைக்கப்படும் ஒரு செயல்பாடு.
• complete: அப்சர்வெபில் முடியும் போது (ஸ்ட்ரீமின் முடிவைக் குறிக்கும்) அழைக்கப்படும் ஒரு செயல்பாடு.

subscribe() முறை ஒரு சப்ஸ்கிரிப்ஷன் பொருளைத் திருப்பித் தருகிறது, இது அப்சர்வெபில் மற்றும் அப்சர்வர் இடையேயான இணைப்பைக் குறிக்கிறது. மேலும் மதிப்புகள் வெளியிடப்படுவதைத் தடுக்க, அப்சர்வெபில்-லிருந்து அன்சப்ஸ்கிரைப் செய்ய நீங்கள் சப்ஸ்கிரிப்ஷன் பொருளைப் பயன்படுத்தலாம்.

அப்சர்வெபில்களிலிருந்து அன்சப்ஸ்கிரைப் செய்தல்:

நினைவகக் கசிவுகளைத் (memory leaks) தடுக்க அன்சப்ஸ்கிரைப் செய்வது மிக முக்கியம், குறிப்பாக நீண்ட காலம் வாழும் அப்சர்வெபில்கள் அல்லது அடிக்கடி மதிப்புகளை வெளியிடும் அப்சர்வெபில்களைக் கையாளும் போது. சப்ஸ்கிரிப்ஷன் பொருளில் உள்ள unsubscribe() முறையை அழைப்பதன் மூலம் நீங்கள் ஒரு அப்சர்வெபில்-லிருந்து அன்சப்ஸ்கிரைப் செய்யலாம்.

```javascript import { interval } from 'rxjs'; const myInterval = interval(1000); const subscription = myInterval.subscribe( value => console.log('இடைவெளி:', value) ); // 5 வினாடிகளுக்குப் பிறகு, அன்சப்ஸ்கிரைப் செய்யவும் setTimeout(() => { subscription.unsubscribe(); console.log('அன்சப்ஸ்கிரைப் செய்யப்பட்டது!'); }, 5000); // வெளியீடு (தோராயமாக): // இடைவெளி: 0 // இடைவெளி: 1 // இடைவெளி: 2 // இடைவெளி: 3 // இடைவெளி: 4 // அன்சப்ஸ்கிரைப் செய்யப்பட்டது! ```

RxJS ஆபரேட்டர்கள்: தரவு ஸ்ட்ரீம்களை மாற்றுதல் மற்றும் வடிகட்டுதல்

RxJS ஆபரேட்டர்கள் நூலகத்தின் இதயம். அவை அப்சர்வெபில்களை ஒரு அறிவிப்பு மற்றும் தொகுக்கக்கூடிய வழியில் மாற்ற, வடிகட்ட, இணைக்க மற்றும் கையாள உங்களை அனுமதிக்கின்றன. பல ஆபரேட்டர்கள் உள்ளன, ஒவ்வொன்றும் ஒரு குறிப்பிட்ட நோக்கத்திற்காக சேவை செய்கின்றன. இங்கே பொதுவாகப் பயன்படுத்தப்படும் சில ஆபரேட்டர்கள்:

உருமாற்ற ஆபரேட்டர்கள்:

• map(): அப்சர்வெபில்-ஆல் வெளியிடப்படும் ஒவ்வொரு மதிப்பிற்கும் ஒரு செயல்பாட்டைப் பயன்படுத்துகிறது மற்றும் முடிவை வெளியிடுகிறது. அரேக்களில் உள்ள map() முறை போன்றது.
• pluck(): அப்சர்வெபில்-ஆல் வெளியிடப்படும் ஒவ்வொரு மதிப்பிலிருந்தும் ஒரு குறிப்பிட்ட பண்பை பிரித்தெடுக்கிறது.
• scan(): மூல அப்சர்வெபில் மீது ஒரு அக்குமுலேட்டர் செயல்பாட்டைப் பயன்படுத்துகிறது மற்றும் ஒவ்வொரு இடைநிலை முடிவையும் திருப்பித் தருகிறது.
• buffer(): மூல அப்சர்வெபில்-லிருந்து மதிப்புகளை ஒரு அரேவில் சேகரித்து, ஒரு குறிப்பிட்ட நிபந்தனை பூர்த்தி செய்யப்படும்போது அந்த அரேவை வெளியிடுகிறது.
• window(): buffer() போன்றது, ஆனால் ஒரு அரேவை வெளியிடுவதற்குப் பதிலாக, மதிப்புகளின் ஒரு சாளரத்தைக் குறிக்கும் ஒரு அப்சர்வெபில்-ஐ வெளியிடுகிறது.

உதாரணம்: map() ஆபரேட்டரைப் பயன்படுத்துதல்

```javascript import { from } from 'rxjs'; import { map } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5]); const squaredNumbers = numbers.pipe( map(x => x * x) ); squaredNumbers.subscribe(value => console.log('வர்க்கம்:', value)); // வெளியீடு: // வர்க்கம்: 1 // வர்க்கம்: 4 // வர்க்கம்: 9 // வர்க்கம்: 16 // வர்க்கம்: 25 ```

வடிகட்டுதல் ஆபரேட்டர்கள்:

• filter(): ஒரு குறிப்பிட்ட நிபந்தனையை பூர்த்தி செய்யும் மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• debounceTime(): எந்த புதிய மதிப்புகளும் வெளியிடப்படாமல் ஒரு குறிப்பிட்ட அளவு நேரம் கடந்து செல்லும் வரை மதிப்புகளின் வெளியீட்டைத் தாமதப்படுத்துகிறது. பயனர் உள்ளீட்டைக் கையாள்வதற்கும் அதிகப்படியான கோரிக்கைகளைத் தடுப்பதற்கும் இது பயனுள்ளதாக இருக்கும்.
• distinctUntilChanged(): முந்தைய மதிப்பிலிருந்து வேறுபட்ட மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• take(): அப்சர்வெபில்-லிருந்து முதல் N மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• skip(): அப்சர்வெபில்-லிருந்து முதல் N மதிப்புகளைத் தவிர்த்து, மீதமுள்ள மதிப்புகளை வெளியிடுகிறது.

உதாரணம்: filter() ஆபரேட்டரைப் பயன்படுத்துதல்

```javascript import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5, 6]); const evenNumbers = numbers.pipe( filter(x => x % 2 === 0) ); evenNumbers.subscribe(value => console.log('இரட்டைப்படை:', value)); // வெளியீடு: // இரட்டைப்படை: 2 // இரட்டைப்படை: 4 // இரட்டைப்படை: 6 ```

இணைப்பு ஆபரேட்டர்கள்:

• merge(): பல அப்சர்வெபில்களை ஒரே அப்சர்வெபில்-ஆக இணைக்கிறது.
• concat(): பல அப்சர்வெபில்களை ஒன்றிணைக்கிறது, ஒவ்வொரு அப்சர்வெபில்-லிருந்தும் மதிப்புகளை வரிசையாக வெளியிடுகிறது.
• combineLatest(): பல அப்சர்வெபில்களிலிருந்து சமீபத்திய மதிப்புகளை இணைத்து, மூல அப்சர்வெபில்களில் ஏதேனும் ஒன்று ஒரு மதிப்பை வெளியிடும் போதெல்லாம் ஒரு புதிய மதிப்பை வெளியிடுகிறது.
• zip(): பல அப்சர்வெபில்களிலிருந்து மதிப்புகளை அவற்றின் குறியீட்டின் அடிப்படையில் இணைத்து, ஒவ்வொரு சேர்க்கைக்கும் ஒரு புதிய மதிப்பை வெளியிடுகிறது.
• withLatestFrom(): மூல அப்சர்வெபில்-லிருந்து தற்போதைய மதிப்புடன் மற்றொரு அப்சர்வெபில்-லிருந்து சமீபத்திய மதிப்பை இணைக்கிறது.

உதாரணம்: combineLatest() ஆபரேட்டரைப் பயன்படுத்துதல்

```javascript import { interval, combineLatest } from 'rxjs'; import { map } from 'rxjs/operators'; const interval1 = interval(1000); const interval2 = interval(2000); const combinedIntervals = combineLatest( interval1, interval2, (x, y) => `இடைவெளி 1: ${x}, இடைவெளி 2: ${y}` ); combinedIntervals.subscribe(value => console.log(value)); // வெளியீடு (தோராயமாக): // இடைவெளி 1: 0, இடைவெளி 2: 0 // இடைவெளி 1: 1, இடைவெளி 2: 0 // இடைவெளி 1: 1, இடைவெளி 2: 1 // இடைவெளி 1: 2, இடைவெளி 2: 1 // இடைவெளி 1: 2, இடைவெளி 2: 2 // ... ```

பொதுவான RxJS பேட்டர்ன்கள்

RxJS பொதுவான ஒத்திசைவற்ற நிரலாக்கப் பணிகளை எளிதாக்கக்கூடிய பல சக்திவாய்ந்த பேட்டர்ன்களை வழங்குகிறது:

டிபவுன்சிங் (Debouncing):

debounceTime() ஆபரேட்டர், எந்த புதிய மதிப்புகளும் வெளியிடப்படாமல் ஒரு குறிப்பிட்ட அளவு நேரம் கடந்து செல்லும் வரை மதிப்புகளின் வெளியீட்டைத் தாமதப்படுத்தப் பயன்படுகிறது. பயனர் உள்ளீடுகளைக் கையாள இது மிகவும் பயனுள்ளதாக இருக்கும், அதாவது தேடல் வினவல்கள் அல்லது படிவச் சமர்ப்பிப்புகள், அங்கு நீங்கள் சேவையகத்திற்கு அதிகப்படியான கோரிக்கைகளைத் தடுக்க விரும்புகிறீர்கள்.

உதாரணம்: ஒரு தேடல் உள்ளீட்டை டிபவுன்ஸ் செய்தல்

```javascript import { fromEvent } from 'rxjs'; import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), // ஒவ்வொரு விசை அழுத்தத்திற்கும் பிறகு 300ms காத்திருக்கவும் distinctUntilChanged() // மதிப்பு மாறியிருந்தால் மட்டுமே வெளியிடவும் ); searchObservable.subscribe(searchTerm => { console.log('தேடுகிறது:', searchTerm); // சொல்லைத் தேட ஒரு API கோரிக்கையை அனுப்பவும் }); ```

த்ராட்லிங் (Throttling):

throttleTime() ஆபரேட்டர் ஒரு அப்சர்வெபில்-லிருந்து மதிப்புகள் வெளியிடப்படும் விகிதத்தைக் கட்டுப்படுத்துகிறது. இது ஒரு குறிப்பிட்ட நேர சாளரத்தில் வெளியிடப்பட்ட முதல் மதிப்பை வெளியிடுகிறது மற்றும் சாளரம் மூடும் வரை அடுத்தடுத்த மதிப்புகளைப் புறக்கணிக்கிறது. ஸ்க்ரோல் நிகழ்வுகள் அல்லது அளவு மாற்ற நிகழ்வுகள் போன்ற நிகழ்வுகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த இது பயனுள்ளதாக இருக்கும்.

ஸ்விட்சிங் (Switching):

switchMap() ஆபரேட்டர், மூல அப்சர்வெபில்-லிருந்து ஒரு புதிய மதிப்பு வெளியிடப்படும் போதெல்லாம் ஒரு புதிய அப்சர்வெபில்-க்கு மாறப் பயன்படுகிறது. ஒரு புதிய கோரிக்கை தொடங்கப்படும்போது நிலுவையில் உள்ள கோரிக்கைகளை ரத்து செய்ய இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, பயனர் தேடல் உள்ளீட்டில் ஒரு புதிய எழுத்தைத் தட்டச்சு செய்யும் போது முந்தைய தேடல் கோரிக்கையை ரத்து செய்ய switchMap()-ஐப் பயன்படுத்தலாம்.

உதாரணம்: டைப்ஹெட் தேடலுக்கு switchMap()-ஐப் பயன்படுத்துதல்

```javascript import { fromEvent, of } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), distinctUntilChanged(), switchMap(searchTerm => { // சொல்லைத் தேட ஒரு API கோரிக்கையை அனுப்பவும் return searchAPI(searchTerm).pipe( catchError(error => { console.error('தேடும்போது பிழை:', error); return of([]); // பிழை ஏற்பட்டால் ஒரு காலி அரேவை திருப்பியனுப்பவும் }) ); }) ); searchObservable.subscribe(results => { console.log('தேடல் முடிவுகள்:', results); // தேடல் முடிவுகளுடன் UI-ஐப் புதுப்பிக்கவும் }); function searchAPI(searchTerm: string) { // ஒரு API கோரிக்கையை உருவகப்படுத்தவும் return of([`'${searchTerm}' க்கான முடிவு 1`, `'${searchTerm}' க்கான முடிவு 2`]); } ```

RxJS-இன் நடைமுறை பயன்பாடுகள்

RxJS என்பது பலதரப்பட்ட பயன்பாடுகளில் பயன்படுத்தக்கூடிய ஒரு பல்துறை நூலகமாகும். இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள் உள்ளன:

• பயனர் உள்ளீட்டைக் கையாளுதல்: விசை அழுத்தங்கள், மவுஸ் கிளிக்குகள் மற்றும் படிவச் சமர்ப்பிப்புகள் போன்ற பயனர் உள்ளீட்டு நிகழ்வுகளைக் கையாள RxJS பயன்படுத்தப்படலாம். செயல்திறனை மேம்படுத்தவும் அதிகப்படியான கோரிக்கைகளைத் தடுக்கவும் debounceTime() மற்றும் throttleTime() போன்ற ஆபரேட்டர்களைப் பயன்படுத்தலாம்.
• ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகித்தல்: நெட்வொர்க் கோரிக்கைகள் மற்றும் டைமர்கள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிக்க RxJS ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. ஒரே நேரத்தில் நடக்கும் கோரிக்கைகளைக் கையாளவும், நிலுவையில் உள்ள கோரிக்கைகளை ரத்து செய்யவும் switchMap() மற்றும் mergeMap() போன்ற ஆபரேட்டர்களைப் பயன்படுத்தலாம்.
• நிகழ்நேர பயன்பாடுகளை உருவாக்குதல்: அரட்டை பயன்பாடுகள் மற்றும் டாஷ்போர்டுகள் போன்ற நிகழ்நேர பயன்பாடுகளை உருவாக்க RxJS மிகவும் பொருத்தமானது. WebSockets அல்லது Server-Sent Events (SSE)-லிருந்து வரும் தரவு ஸ்ட்ரீம்களைக் குறிக்க அப்சர்வெபில்களைப் பயன்படுத்தலாம்.
• நிலை மேலாண்மை (State Management): ஆங்குலர், ரியாக்ட் மற்றும் வியூ.ஜேஎஸ் போன்ற கட்டமைப்புகளில் RxJS ஒரு நிலை மேலாண்மை தீர்வாகப் பயன்படுத்தப்படலாம். பயன்பாட்டின் நிலையை குறிக்க அப்சர்வெபில்களையும், பயனர் செயல்கள் அல்லது நிகழ்வுகளுக்குப் பதிலளிக்கும் விதமாக நிலையை மாற்றவும் புதுப்பிக்கவும் ஆபரேட்டர்களையும் பயன்படுத்தலாம்.

பிரபலமான கட்டமைப்புகளுடன் RxJS

ஆங்குலர் (Angular):

ஆங்குலர் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்வதற்கும் தரவு ஸ்ட்ரீம்களை நிர்வகிப்பதற்கும் RxJS-ஐ பெரிதும் நம்பியுள்ளது. ஆங்குலரில் உள்ள HttpClient சேவை அப்சர்வெபில்களைத் திருப்பித் தருகிறது, மேலும் API கோரிக்கைகளிலிருந்து திரும்பிய தரவை மாற்றுவதற்கும் வடிகட்டுவதற்கும் RxJS ஆபரேட்டர்கள் விரிவாகப் பயன்படுத்தப்படுகின்றன. ஆங்குலரின் மாற்றத்தைக் கண்டறியும் பொறிமுறையானது தரவு மாற்றங்களுக்குப் பதிலளிக்கும் விதமாக UI-ஐ திறமையாகப் புதுப்பிக்க RxJS-ஐப் பயன்படுத்துகிறது.

உதாரணம்: ஆங்குலரின் HttpClient உடன் RxJS-ஐப் பயன்படுத்துதல்

```typescript import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https://api.example.com/data'; constructor(private http: HttpClient) { } getData(): Observable { return this.http.get(this.apiUrl).pipe( map(data => data.map(item => ({ ...item, processed: true }))) ); } } ```

ரியாக்ட் (React):

ரியாக்டில் RxJS-க்கு உள்ளமைக்கப்பட்ட ஆதரவு இல்லை என்றாலும், rxjs-hooks அல்லது use-rx போன்ற நூலகங்களைப் பயன்படுத்தி அதை எளிதாக ஒருங்கிணைக்க முடியும். இந்த நூலகங்கள் அப்சர்வெபில்களுக்கு சப்ஸ்கிரைப் செய்யவும் மற்றும் ரியாக்ட் கூறுகளுக்குள் சப்ஸ்கிரிப்ஷன்களை நிர்வகிக்கவும் உங்களை அனுமதிக்கும் தனிப்பயன் ஹூக்குகளை வழங்குகின்றன. ரியாக்டில் ஒத்திசைவற்ற தரவுப் பெறுதல், கூறு நிலையை நிர்வகித்தல் மற்றும் ரியாக்டிவ் UI-களை உருவாக்குவதற்கு RxJS பயன்படுத்தப்படலாம்.

உதாரணம்: ரியாக்ட் ஹூக்குகளுடன் RxJS-ஐப் பயன்படுத்துதல்

```javascript import React, { useState, useEffect } from 'react'; import { Subject } from 'rxjs'; import { scan } from 'rxjs/operators'; function Counter() { const [count, setCount] = useState(0); const increment$ = new Subject(); useEffect(() => { const subscription = increment$.pipe( scan(acc => acc + 1, 0) ).subscribe(setCount); return () => subscription.unsubscribe(); }, []); return (

); } ```

வியூ.ஜேஎஸ் (Vue.js):

வியூ.ஜேஎஸ்-லும் RxJS-க்கு சொந்த ஒருங்கிணைப்பு இல்லை, ஆனால் அதை vue-rx போன்ற நூலகங்களுடன் அல்லது வியூ கூறுகளுக்குள் சப்ஸ்கிரிப்ஷன்களை கைமுறையாக நிர்வகிப்பதன் மூலம் பயன்படுத்தலாம். ரியாக்டில் உள்ளதைப் போலவே, ஒத்திசைவற்ற தரவுப் பெறுதல் மற்றும் கூறு நிலையை நிர்வகித்தல் போன்ற நோக்கங்களுக்காக வியூ.ஜேஎஸ்-ல் RxJS பயன்படுத்தப்படலாம்.

RxJS-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

• அப்சர்வெபில்களிலிருந்து அன்சப்ஸ்கிரைப் செய்யவும்: நினைவகக் கசிவுகளைத் தடுக்க, அப்சர்வெபில்கள் இனி தேவைப்படாதபோது எப்போதும் அன்சப்ஸ்கிரைப் செய்யவும். அன்சப்ஸ்கிரைப் செய்ய subscribe() முறையால் திருப்பியனுப்பப்படும் சப்ஸ்கிரிப்ஷன் பொருளைப் பயன்படுத்தவும்.
• pipe() முறையைப் பயன்படுத்தவும்: ஆபரேட்டர்களைப் படிக்கக்கூடிய மற்றும் பராமரிக்கக்கூடிய வழியில் ஒன்றாக இணைக்க pipe() முறையைப் பயன்படுத்தவும்.
• பிழைகளை நளினமாகக் கையாளவும்: பிழைகளைக் கையாளவும், அவை அப்சர்வெபில் சங்கிலியில் பரவுவதைத் தடுக்கவும் catchError() ஆபரேட்டரைப் பயன்படுத்தவும்.
• சரியான ஆபரேட்டர்களைத் தேர்ந்தெடுக்கவும்: உங்கள் குறிப்பிட்ட பயன்பாட்டு வழக்கிற்குப் பொருத்தமான ஆபரேட்டர்களைத் தேர்ந்தெடுக்கவும். RxJS பரந்த அளவிலான ஆபரேட்டர்களை வழங்குகிறது, எனவே அவற்றின் நோக்கம் மற்றும் நடத்தையைப் புரிந்துகொள்வது முக்கியம்.
• அப்சர்வெபில்களை எளிமையாக வைத்திருங்கள்: மிகவும் சிக்கலான அப்சர்வெபில்களை உருவாக்குவதைத் தவிர்க்கவும். சிக்கலான செயல்பாடுகளை சிறிய, நிர்வகிக்கக்கூடிய அப்சர்வெபில்களாக உடைக்கவும்.

மேம்பட்ட RxJS கருத்துக்கள்

சப்ஜெக்ட்கள் (Subjects):

சப்ஜெக்ட்கள் அப்சர்வெபில்கள் மற்றும் அப்சர்வர்கள் என இரண்டாகவும் செயல்படுகின்றன. அவை பல சப்ஸ்கிரைபர்களுக்கு தரவை மல்டிகாஸ்ட் செய்யவும், ஸ்ட்ரீமில் தரவைச் சேர்க்கவும் உங்களை அனுமதிக்கின்றன. இதில் பல்வேறு வகையான சப்ஜெக்ட்கள் உள்ளன, அவற்றுள்:

• Subject: அனைத்து சப்ஸ்கிரைபர்களுக்கும் மதிப்புகளை மல்டிகாஸ்ட் செய்யும் ஒரு அடிப்படை சப்ஜெக்ட்.
• BehaviorSubject: ஒரு ஆரம்ப மதிப்பு தேவைப்படுகிறது மற்றும் புதிய சப்ஸ்கிரைபர்களுக்கு தற்போதைய மதிப்பை வெளியிடுகிறது.
• ReplaySubject: ஒரு குறிப்பிட்ட எண்ணிக்கையிலான மதிப்புகளைச் சேமித்து, அவற்றை புதிய சப்ஸ்கிரைபர்களுக்கு மீண்டும் அனுப்புகிறது.
• AsyncSubject: அப்சர்வெபில் முடியும் போது கடைசி மதிப்பை மட்டுமே வெளியிடுகிறது.

ஷெட்யூலர்கள் (Schedulers):

ஷெட்யூலர்கள் அப்சர்வெபில்களின் ஒத்திசைவைக் கட்டுப்படுத்துகின்றன. அவை குறியீட்டை ஒத்திசைவாகவோ அல்லது ஒத்திசைவற்றதாகவோ, வெவ்வேறு திரெட்களிலோ அல்லது குறிப்பிட்ட தாமதங்களுடனோ இயக்க உங்களை அனுமதிக்கின்றன. RxJS பல உள்ளமைக்கப்பட்ட ஷெட்யூலர்களை வழங்குகிறது, அவற்றுள்:

• queueScheduler: தற்போதைய ஜாவாஸ்கிரிப்ட் த்ரெட்டில், தற்போதைய εκτέλεση சூழலுக்குப் பிறகு, ಕಾರ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು షెడ్యూల్ చేస్తుంది.
• asapScheduler: தற்போதைய ஜாவாஸ்கிரிப்ட் த்ரெட்டில், தற்போதைய εκτέλεση சூழலுக்குப் பிறகு, கூடிய விரைவில் ಕಾರ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು షెడ్యూల్ చేస్తుంది.
• asyncScheduler: setTimeout அல்லது setInterval பயன்படுத்தி, ಕಾರ್ಯಗಳನ್ನು ಒத்திசைவற்றதாக ಕಾರ್ಯಗತಗೊಳಿಸಲು షెడ్యూల్ చేస్తుంది.
• animationFrameScheduler: அடுத்த அனிமேஷன் பிரேமில் ಕಾರ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು షెడ్యూల్ చేస్తుంది.

முடிவுரை

RxJS என்பது ஜாவாஸ்கிரிப்டில் ரியாக்டிவ் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த நூலகமாகும். அப்சர்வெபில்கள், ஆபரேட்டர்கள் மற்றும் பொதுவான பேட்டர்ன்களை மாஸ்டர் செய்வதன் மூலம், நீங்கள் மிகவும் பதிலளிக்கக்கூடிய, அளவிடக்கூடிய மற்றும் பராமரிக்க எளிதான பயன்பாடுகளை உருவாக்க முடியும். நீங்கள் ஆங்குலர், ரியாக்ட், வியூ.ஜேஎஸ் அல்லது வெண்ணிலா ஜாவாஸ்கிரிப்ட் உடன் பணிபுரிந்தாலும், RxJS ஒத்திசைவற்ற தரவு ஸ்ட்ரீம்களைக் கையாளும் மற்றும் சிக்கலான UI-களை உருவாக்கும் உங்கள் திறனை கணிசமாக மேம்படுத்தும்.

RxJS உடன் ரியாக்டிவ் ப்ரோகிராமிங்கின் சக்தியைத் தழுவி, உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாடுகளுக்கு புதிய சாத்தியங்களைத் திறந்திடுங்கள்!